<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <title>Document</title>
    <style>
        .imgText_mix_box_left {
            background-color: var(--c_theme);
            width: 600px;
            height: 565px;

        }

        .imgText_mix_box_left h3 {
            max-width: 365px;
            color: #fff;
            font-size: var(--f_title);
            line-height: var(--l_title);
            padding-top: 130px;
            margin: auto;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical
        }

        .imgText_mix_box_left p {
            max-width: 365px;
            color: #fff;
            font-size: var(--f_describe);
            line-height: var(--l_describe);
            padding-top: 118px;
            margin: auto;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical
        }

        .imgText_mix_box_right {
            width: 800px;
        }

        .imgText_mix_box_right li img {
            display: block;
            width: 71px;
            height: 71px;
            margin: auto;
        }

        .imgText_mix_box_right li p {
            width: 234px;
            color: var(--c_text);
            font-size: var(--f_describe);
            line-height: var(--l_describe);
            text-align: center;
            margin: auto;
            padding-top: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical
        }

        .imgText_mix_box_left,
        .imgText_mix_box_left li,
        .imgText_mix_box_right,
        .imgText_mix_box_right li {
            padding-left: 0;
            padding-right: 0;
        }

        @media (max-width:768px) {
            .imgText_mix_box_left {
                height: 145px;
                width: 100%;
            }

            .imgText_mix_box_left h3 {
                padding-top: 0;
                text-align: center;
                margin: auto;
            }

            .imgText_mix_box_left p {
                padding-top: 20px;
            }

            .imgText_mix_box_right li {
                padding-bottom: 20px;
            }

            .imgText_mix_box_right li p {
                width: 100%;
            }

            .imgText_mix_box_left {
                margin-bottom: 40px;
            }
        }
    </style>
</head>

<body>
    <div class="imgText_mix modular">
        <div class="public_width ">
            <div class="imgText_mix_box row">
                <div class="imgText_mix_box_left col-xl-5 col-12">
                    <h3>服务分类</h3>
                    <p>众多的客户为我们带来了在不同领域积极发挥的机会，
                        也为我们累积了丰富的经验。我们专业的制作、良好的信誉得到了社会及客户的一致赞誉。</p>
                </div>
                <ul class="imgText_mix_box_right col-xl-7 col-12 row">
                    <li class="col-6 "><img src="../images/brand3.png.webp" alt="">
                        <p>策划使企业形象和品牌在消费者脑海中形成个性化的区隔 </p>
                    </li>
                    <li class="col-6"><img src="../images/brand3.png.webp" alt="">
                        <p>策划使企业形象和品牌在消费者脑海中形成个性化的区隔</p>
                    </li>
                    <li class="col-6"><img src="../images/brand3.png.webp" alt="">
                        <p>策划使企业形象和品牌在消费者脑海中形成个性化的区隔</p>
                    </li>
                    <li class="col-6"><img src="../images/brand3.png.webp" alt="">
                        <p>策划使企业形象和品牌在消费者脑海中形成个性化的区隔</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>